[Amazon Connect] キャンペーンなどで電話をする時は、一覧をS3に置いて、クリックだけで次々発信できると便利かも

SIN

2018.12.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

AIソリューション部の平内（SIN）です。

Amazon Connect(以下、Connect)では、CCPを利用して発信が可能です。

今回は、キャンペーンの案内を顧客情報（一覧）から順に電話する作業をイメージして、エージェント（オペレータ）の作業が、少しでも楽に、そして間違いのないようにするため、クリックだけで発信する仕組みを作ってみました。

最初に利用しているようすです。

2 顧客データ

顧客データは、テキストで準備してS3に置いています。

customer_data.txt（サンプルのため伏せ字になっています）

石X XX,いしぐろ XXX,大阪府,080-XXX-49X5
上X XX,うえだ XXX,京都府,080-XXXX-66X2
柳X XX,XXX あやめ,徳島県,090-XXXX-30X2
XX 栄X,XXX えいいち,岩手県,080-XXXX-06X6
五X XX,いがらし XXX,秋田県,090-XXXX-97X1
高X XX,たかくら XXX,香川県,080-XXXX-64X6
水X XX,みずの XXX,福岡県,090-XXXX-99X1
上X XX,XXX るりあ,山口県,090-XXXX-30X0
X本 XX,XXX ひろみ,東京都,090-XXXX-34X6
X川 XX,おいかわ XXX,茨城県,090-XXXX-90X3
X口 XX,たぐち XXX,神奈川県,090-XXXX-77X1
XX まひる,XXX まひる,静岡県,090-XXXX-27X4
XX X子,XXX けいこ,広島県,061-XXX-99X9

・・・略・・・

S3に置きます。

3 CCP

CCPを表示するには、Connectのホワイトリストに追加する必要がありますが、httpsであることが必須であるため、今回は、S3に置いて公開しています。

4 JavaScript(html)

作成した、JavaScript(html)は、以下のとおりです。CCPを初期化して、agentオブジェクトで発信しています。

S3から取得した顧客情報は、必要な部分だけを表示しています。

<br /><br /><br /><center></center> 
<table>
<tbody>
<tr>
<td>
<div id="containerDiv"></div></td>
<td>
<div id="scroll-list"></div></td>
</tr>
</tbody>
</table>
<script>

    /* 顧客一覧の表示 */
    AWS.config.region = 'ap-northeast-1'; 
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    });
    const s3 = new AWS.S3();
    async function getCustomer(){
        var params = {
            Bucket: 'bucket_name',
            Key: 'customer_data.txt'
        };
        const data = await s3.getObject(params).promise();
        let text = decodeURIComponent(escape(String.fromCharCode.apply(null, data.Body)));
        var lines = text.split('\n');
        for ( var i = 0; i < lines.length; i++ ) {
            const tmp = lines[i].split(',');
            // 電話番号は、非表示とする
            $('</p>
<li>'+tmp[1]+ ' ('+ tmp[2] + ')'+'<br />
<div class="phone-number">' + tmp[3] + '</div>
</li>
<p>').appendTo('ol').on('click', phone_click);
        }

    }
    getCustomer();

    /* CCP初期化 */
    var login_agent = undefined;
    var ccpUrl = "https://xxxxxxxx.awsapps.com/connect/ccp#";
    connect.core.initCCP(containerDiv, {
        ccpUrl: ccpUrl,        
        loginPopup: true,         
        softphone: {
            allowFramedSoftphone: true
        }
    });
    connect.agent( agent => {
        login_agent = agent; //エージェントオブジェクトを取得
    });

    /* 発信 */
    function dialContact(phone_number) {
        var endpoint = connect.Endpoint.byPhoneNumber(phone_number);
        login_agent.connect(endpoint,{
            success: function () {
                console.log("Connect Success");
            },
            failure: function () {
                console.log("Connect Failed");
            }
        });
    }

    /* 顧客一覧の選択（クリック） */
    function phone_click() {
        if(0 <= $(this).css('background').indexOf('rgb(255')){
            // コールが完了したリスト
            $(this).css('background','#3F6D8c');
        } else {
            // まだコールしていないリスト
            $(this).css('background','red');
            // 非表示となっている子要素(電話番号)を取得する
            const phoneNumber = $(this).children().text();
            dialContact(phoneNumber);
        }
    }
</script>